<template>
    <div id="AllCategoriesComponent">
        <a-list
            :data-source="data"
            :loading="initLoading"
            class="demo-loadmore-list"
            item-layout="horizontal"
            size="small"
            style="text-align:left">
            <!--            <template #loadMore>-->
            <!--                <div-->
            <!--                    v-if="!initLoading"-->
            <!--                    :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"-->
            <!--                >-->
            <!--                    <a-button @click="onLoadMore">加载更多</a-button>-->
            <!--                </div>-->
            <!--            </template>-->
            <template #renderItem="{ item:productEsVo }">
                <!--品牌-->
                <a-list-item>
                    <a-skeleton :loading="false" :title="true" active avatar>
                        <a-list-item-meta>
                            <template #title>
                                <a>品牌: </a>
                            </template>
                            <template #description>
                                <a-card size="small">
                                    <a-card-grid
                                        v-for="(brand,index) in productEsVo.brands as ProductSearchVo['brands']"
                                        :key="brand.brandId"
                                        :hoverable="true"
                                        style="width: 20%;text-align: center">
                                        <a-image
                                            :preview="false"
                                            :src="brand.brandImg"
                                            style="width: 100%; height: 100%"
                                            @click="searchProductByBrand(brand)"
                                        />
                                    </a-card-grid>
                                </a-card>
                            </template>
                        </a-list-item-meta>
                    </a-skeleton>
                </a-list-item>
                <!--属性-->
                <a-list-item v-for="(attr,index) in productEsVo.attrs as ProductSearchVo['attrs']" :key="attr.attrId">
                    <a-skeleton :loading="false" :title="true" active avatar>
                        <a-list-item-meta>
                            <template #title>
                                {{ attr.attrName }}:
                            </template>
                            <template #description>
                                <a v-for="(attrValue,index) in attr.attrValues as AttrVo['attrValues']">
                                    <el-link :key="attrValue" type="primary"
                                             @click="searchProductByAttr(attr.attrId,attrValue)">
                                        {{ attrValue }}
                                    </el-link>
                                    <a-divider v-show="index<(attr.attrValues.length-1)"
                                               style="width: 2px;background-color: aquamarine"
                                               type="vertical" />
                                </a>
                            </template>
                        </a-list-item-meta>
                    </a-skeleton>
                </a-list-item>
            </template>
        </a-list>
    </div>
</template>

<script lang="ts" setup>
import { AttrVo, BrandVo, ProductSearchVo, SearchRouterParams } from "@/model/SearchModel.ts";
import { ref, toRefs } from "vue";
import router from "@/router/router.ts";

const initLoading = ref(false);
const propData = defineProps<{ data: ProductSearchVo[] }>();
const { data } = toRefs(propData);

const $emit = defineEmits<{
    (e: "select", isSelected: true): void
}>();
/**
 * 添加属性ID条件,搜索商品
 * @param attrId 属性ID
 * @param attrValue 选中的属性值
 */
const searchProductByAttr = (attrId: number, attrValue: string) => {
    // 获取路由中的参数
    let routerParams: SearchRouterParams = router.currentRoute.value.query;
    //组装属性条件
    let attrs: string[] = [];
    if (attrId && attrValue) {
        attrs.push(`${attrId}_${attrValue}`);
    }
    //添加新的路由参数
    router.push({
        query: {
            ...routerParams,
            attrs: attrs,
        } as SearchRouterParams,
    }).then(res => {
        //通知父组件已选择成功,可以刷新了
        $emit("select", true);
    });

};
/**
 * 添加品牌ID条件,搜索商品
 * @param brand 品牌
 */
const searchProductByBrand = (brand: BrandVo) => {
    //从路由中获取参数
    let routerParams: SearchRouterParams = router.currentRoute.value.query;
    //组装品牌条件
    let brandIds: number[] = [];
    if (brand.brandId) {
        brandIds.push(brand.brandId);
    }
    //添加新的路由参数
    router.push({
        query: {
            ...routerParams,
            brandId: brandIds,
        } as SearchRouterParams,
    }).then(res => {
        //通知父组件已选择成功,可以刷新了
        $emit("select", true);
    });
};
const onLoadMore = () => {
    initLoading.value = !initLoading.value;
};

</script>

<style lang="scss" scoped>
@import "@/style/variables";

#AllCategoriesComponent {
    margin-left: $SEARCH_MARGIN_LEFT; //左边距
}
</style>